<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>图文列表</title>
		<style>
			h2 {
				text-align: center;
			}
			.list {
				/* 网页内居中 */
				/* 每一块的宽度*4 */
				/* (256 + 2 + 10) * 4 = 1072 */
				width: 1072px;
				/* height: 500px; */
				margin: 0px auto;
			}
			/* 左右间隔，文本居中，图文块产生边框 */
			.tuwen {
				float: left;
				margin: 10px 5px;
				border: 1px solid gray;
			}
			.tuwen:hover {
				border: 1px solid #f00;
			}
			.tuwen>a {
				color: #000;
				text-decoration: none;
			}
			/* 1024 * 576 */
			img {
				width: 256px;
				height: 144px;
			}
			.tuwen p {
				text-align: center;
				margin: 0;
			}
		</style>
	</head>
	<body>
		<h2>图文列表</h2>
		<div class="list">
			<div class="tuwen">
				<!-- target:_self,原窗口跳转;_blank:新开空白窗口 -->
				<a href="https://www.baidu.com" target="_blank">
					<img src="img/1.jpg" />
					<p>第一张图片</p>
				</a>
			</div>
			<div class="tuwen">
				<a href="https://www.taobao.com" target="_blank">
					<img src="img/2.jpg" />
					<p>第二张图片</p>
				</a>
			</div>
			<div class="tuwen">
				<a href="https://www.zhihu.com" target="_blank">
					<img src="img/3.jpg" />
					<p>第三张图片</p>
				</a>
			</div>
			<div class="tuwen">
				<a href="https://www.hao123.com" target="_blank">
					<img src="img/4.jpg" />
					<p>第四张图片</p>
				</a>
			</div>
		</div>
	</body>
</html>